<template>
  <view class="challenge_list">
    <u-navbar :title="NavTitle"
              height="44"
              :immersive="true"
              :is-back="true"
              :background="scHeight > 0 ? {background: '#FEF3CE'} : background"
              :title-color="scHeight > 0 ? '#6B0C03' : '#FFFFFF'"
              :back-icon-color="scHeight > 0 ? '#6B0C03' : '#FFFFFF'"
              :border-bottom="false"></u-navbar>
    <view class="challeng_list_bg"><image :src="BestImgUrl + '/money/money_challenge_list_bg.png'" mode="widthFix" style="width: 100%;height: 100%;"></image></view>
    <view class="challenge_list_content">
      <view class="navbar_height" :style="{'height': safeHeight + 44 + 'px'}"></view>
      <scroll-view :scroll-y="true" class="challenge_list_scroll">
        <!--挑战赛列表banner-->
        <view class="challenge_list_banner">
          <view class="banner_img01"><image :src="BestImgUrl + '/money/money_challenge_list_img01.png'" mode="widthFix" style="width: 100%;height: 100%;"></image></view>
          <!--<view class="banner_img02"><image :src="BestImgUrl + '/money/money_challenge_list_img02.png'" mode="widthFix" style="width: 100%;height: 100%;"></image></view>-->
          <view class="banner_msg">
            <view class="banner_msg_text" style="width: 480rpx;">邀请好友一起探店</view>
            <view class="banner_msg_text" style="width: 330rpx;">得挑战奖励</view>
          </view>
          <view class="banner_text">橙子完成了7天邀请2名有效用户，获得<text style="color: #FD4C0B;">15元</text></view>
        </view>
        <!--挑战赛统计-->
        <view class="challenge_list_statistics">
          <view class="statistics_title">
            <view class="statistics_tip">领食惠探店</view>
            <view class="statistics_title_text">{{ CityName }}</view>
          </view>
          <view class="statistics_content">
            <view class="statistics_item">
              <view class="statistics_item_num">
                <text style="font-size: 44rpx;">{{ challengeTotal.total_reward_amount ? challengeTotal.total_reward_amount.split(".")[0] : 0 }}</text>
                <text style="font-size: 24rpx;">元</text>
              </view>
              <view class="statistics_item_text">累计发放奖金</view>
            </view>
            <view class="statistics_item">
              <view class="statistics_item_num">
                <text style="font-size: 44rpx;">{{ challengeTotal.total_participants || 0 }}</text>
                <text style="font-size: 24rpx;">人</text>
              </view>
              <view class="statistics_item_text">累计挑战人数</view>
            </view>
          </view>
        </view>
        <!--我的挑战赛列表-->
        <view v-if="challengeUserData.length > 0" class="challenge_list_user">
          <view class="user_list_content">
            <view class="user_list_title">
              <view class="user_list_title_text">挑战中活动</view>
              <view class="user_list_title_bg"><image :src="BestImgUrl + '/money/money_challenge_list_tab_bg.png'" mode="widthFix" style="width: 100%;height: 100%;"></image></view>
            </view>
            <view v-for="(item, index) in challengeUserData" :key="index" class="user_list_item">

              <view class="user_list_item_content">
                <view class="user_list_item_content_top">
                  <view class="user_list_item_content_time">
                    <!--<view class="list_time">报名时间：{{ item.start_date ? item.start_date.split("-")[1] + "/" + item.start_date.split("-")[2] : ''}}</view>-->
                    <view class="list_time">报名时间：
                      {{ item.create_time ? item.create_time.split(" ")[0].split("-")[1] + "/" + item.create_time.split(" ")[0].split("-")[2] : '' }}
                      {{ item.create_time ? item.create_time.split(" ")[1].split(":")[0] + ":" + item.create_time.split(" ")[1].split(":")[1] : ''}}
                    </view>
                  </view>
                  <!--<view class="user_list_item_content_join">
                    <image :src="BestImgUrl + '/money/money_challenge_list_icon01.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
                    <view class="list_join_text">{{ item.participant_count }}人已参与</view>
                  </view>-->
                  <view class="user_list_end_time">截止日期：{{ item.end_date ? item.end_date.split(" ")[0] : ''}}</view>
                </view>
                <view class="user_list_warp">
                  <view class="challenge_item_img">
                    <view class="challenge_item_img_text">
                      <text style="font-size: 64rpx">{{ item.reward_value ? item.reward_value.split('.')[0] : 0 }}</text>
                      <text style="font-size: 28rpx">元</text>
                    </view>
                    <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
                  </view>
                  <view class="challenge_item_content">
                    <view class="challenge_item_content_title">
                      <view class="challenge_item_content_title_text ellipsis-one-line">{{ item.title }}</view>
                      <view class="challenge_item_content_title_msg ellipsis-two-line">{{ item.description }}</view>
                    </view>
                  </view>
                </view>
                <u-line color="#EDEDED"></u-line>
                <view class="user_list_foot">
                  <view class="foot_remaining_time">
                    <view class="count_down_time">
                      <text>剩余时间</text>
                      <u-count-down
                          :timestamp="countdowndays(item)"
                          :show-days="true"
                          :show-hours="true"
                          :show-minutes="true"
                          :show-seconds="true"
                          :show-day-colon="true"
                          font-size="26"
                          color="#FF402F"
                          bg-color="#transparent"
                          separator="colon"
                          separator-size="20"
                          separator-color="#FF4E0D">
                      </u-count-down>
                    </view>
                    <view class="user_list_progress">
                      <view class="user_list_progress_left">
                        <text style="padding-right: 10rpx;">进度</text>
                        <text style="color: #FC754A;">{{ item.current_progress }}</text>
                        <text>/{{ item.target_value }}</text>
                      </view>
                      <view class="user_list_progress_right">
                        <view class="progress_active" :style="{ width: item.current_progress/item.target_value*100 + '%' }"></view>
                      </view>
                    </view>
                  </view>
                  <view class="user_list_foot_btn">
                    <view v-if="item.status == 1" @click="cancelSignUP(item)" class="challenge_cancel_btn">取消报名</view>
                    <view v-if="item.status == 1" @click="placeOrder(item)" class="challenge_confirm_btn">去下单</view>
                  </view>
                </view>
              </view>
              <view style="height: 20rpx;"></view>
            </view>
          </view>
        </view>
        <!--挑战赛列表-->
        <view class="challenge_list_box">
          <view class="list_box">
            <view class="user_list_title">
              <view class="user_list_title_text">惊喜挑战  奖金补贴</view>
              <view class="user_list_title_bg" style="top: -14rpx;"><image :src="BestImgUrl + '/money/money_challenge_list_tab_bg02.png'" mode="widthFix" style="width: 100%;height: 100%;"></image></view>
            </view>
            <view v-for="(item, index) in challengeData" :key="index" class="user_list_item">
              <view class="user_list_item_content">
                <view class="user_list_item_content_top">
                  <view class="user_list_item_content_time">
                    <view class="list_time">报名时间：{{ item.start_time.split("-")[1] + "/" + item.start_time.split("-")[2] }}</view>
                  </view>
                  <view class="user_list_item_content_join">
                    <image :src="BestImgUrl + '/money/money_challenge_list_icon01.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image>
                    <view class="list_join_text">{{ item.participant_count }}人已参与</view>
                  </view>
                </view>
                <view class="user_list_warp">
                  <view class="challenge_item_img">
                    <view class="challenge_item_img_text">
                      <text style="font-size: 64rpx">{{ item.reward_value ? item.reward_value.split('.')[0] : 0 }}</text>
                      <text style="font-size: 28rpx">元</text>
                    </view>
                    <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
                  </view>
                  <view class="challenge_item_content">
                    <view class="challenge_item_content_title">
                      <view class="challenge_item_content_title_text ellipsis-one-line">{{ item.title }}</view>
                      <!--<view class="challenge_item_content_title_time">报名日期:{{ item.start_time }}至{{ item.end_time }}</view>-->
                      <!--<view class="challenge_item_content_title_msg" style="display: flex;justify-content: space-between;height: 120rpx;">
                        <view class="challenge_item_msg_text ellipsis-two-line">{{ item.description }}</view>
                        <view class="user_list_foot_btn">
                          <view
                              v-if="new Date().getTime() >= new Date(item.start_time).getTime() && new Date().getTime() <= new Date(item.end_time).getTime()" @click="goShowSignUp(item)"
                              class="challenge_item_content_btn" style="position: absolute;bottom: 0;right: 0;">免费报名</view>
                          <view v-else class="challenge_item_content_btn during">
                            <text>{{item.start_time ? item.start_time.split("-")[1] + "/" + item.start_time.split("-")[2] : ''}}</text>
                            <text>-</text>
                            <text>{{item.end_time ? item.end_time.split("-")[1] + "/" + item.end_time.split("-")[2] : ''}}</text>
                          </view>
                        </view>
                      </view>-->
                    </view>
                    <view class="challenge_item_content_warp">
                      <view class="challenge_item_content_title_msg ellipsis-two-line">{{ item.description }}</view>
                      <view v-if="item.isTimeOut === 2 && item.user_challenge_status === 1" class="challenge_item_content_time" style="color: #888888;font-size: 26rpx;text-align: center;">
                        <view style="padding-bottom: 6rpx;">活动倒计时</view>
                        <u-count-down
                            :timestamp="findcountdown(item)"
                            @end="countDownEndFun"
                            :show-days="true"
                            :show-seconds="true"
                            :show-day-colon="true"
                            font-size="26"
                            height="30"
                            color="#FF7900"
                            bg-color="transparent"
                            separator="colon"
                            separator-size="20"
                            separator-color="#FF7900">
                        </u-count-down>
                        <!--<view>时间内完成任务</view>-->
                      </view>
                      <view v-if="item.isTimeOut === 1" class="challenge_item_content_cancelBtn">活动未开始</view>
                      <view v-if="item.isTimeOut === 2 && item.user_challenge_status === 0" @click="goShowSignUp(item)" class="challenge_item_content_btn">免费报名</view>
                      <view v-if="item.isTimeOut === 3 && item.user_challenge_status === 0" class="challenge_item_content_cancelBtn">活动已结束</view>
                    </view>
                  </view>
                </view>
              </view>
              <view style="height: 20rpx;"></view>
            </view>
          </view>
        </view>
        <!--挑战赛规则按钮-->
        <view @click="isShowRuleChallenge = true" class="challenge_rule_btn">规则</view>
        <!--<view v-for="(item, index) in challengeData" :key="index" class="challenge_item">
          <view class="challenge_item_img">
            <view class="challenge_item_img_text">
              <text style="font-size: 52rpx">{{ item.reward_value ? item.reward_value.split('.')[0] : 0 }}</text>
              <text style="font-size: 26rpx">元</text>
            </view>
            <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
          </view>
          <view class="challenge_item_content">
            <view class="challenge_item_content_title">
              <view class="challenge_item_content_title_text">{{ item.title }}</view>
              <view class="challenge_item_content_title_msg">{{ item.description }}</view>
            </view>
            <view v-if="new Date().getTime() >= new Date(item.start_time).getTime() && new Date().getTime() <= new Date(item.end_time).getTime()" @click="goShowSignUp(item)" class="challenge_item_content_btn">免费报名</view>
            <view v-else class="challenge_item_content_btn during">
              <text>{{item.apply_start_time}}</text>
              <view>-</view>
              <text>{{item.apply_end_time}}</text>
            </view>
          </view>
        </view>-->
      </scroll-view>
    </view>

    <!-- 我的任务按钮，固定在页面右侧 -->
    <view style="width: 128rpx;height: 128rpx;;position: fixed;z-index: 199;right: -20rpx;bottom: 38%;"
          @click="toMyJoin">
      <image style="width: 158rpx;height: 158rpx;;margin: -30rpx" mode="heightFix"
             :src="BestImgUrl + '/money/my_task.png'"></image>
    </view>
    <!--免费报名弹窗-->
    <u-popup v-model="isShowSignUp" mode="bottom" :safe-area-inset-bottom="true" closeable border-radius="34" width="90%" height="80%">
      <view class="sign_up_box">
        <view style="height: 30rpx;"></view>
        <scroll-view :scroll-y="true">
          <view class="sign_warp">
            <view class="challenge_item_img">
              <view class="challenge_item_img_text">
                <text style="font-size: 52rpx">{{ challengeDetail.reward_value ? challengeDetail.reward_value.split('.')[0] : 0 }}</text>
                <text style="font-size: 26rpx">元</text>
              </view>
              <image :src="BestImgUrl + '/money/money_weixin_icon.png'" mode="widthFix" style="width: 100%;height: 100%;"></image>
            </view>
            <view class="challenge_item_content">
              <view class="challenge_item_content_title">
                <view class="challenge_item_content_title_text">{{ challengeDetail.title }}</view>
                <view class="challenge_item_content_title_msg">{{ challengeDetail.description }}</view>
              </view>
            </view>
          </view>
          <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
          <view class="sign_content">
            <view class="sign_content_warp">
              <view class="sign_content_title">报名须知</view>
              <view class="sign_content_item">
                <text>活动开始时间</text>
                <text>{{ challengeDetail.start_time }}</text>
              </view>
              <view class="sign_content_item">
                <text>活动结束时间</text>
                <text>{{ challengeDetail.end_time }}</text>
              </view>
              <view class="sign_content_item">
                <text>任务完成时长</text>
                <text>{{ challengeDetail.duration }}</text>
              </view>
              <view class="sign_content_item">
                <text>挑战奖励</text>
                <text>{{ challengeDetail.reward_value }}</text>
              </view>
            </view>
            <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
            <view class="sign_content_warp">
              <view class="sign_content_title">挑战要求</view>
              <view class="sign_content_item">
                <text>指定城市可参与</text>
                <text>{{ CityName }}</text>
              </view>
              <view class="sign_content_item">
                <text>指定下单时段</text>
                <text v-if="challengeDetail.apply_start_time">{{challengeDetail.apply_start_time}}-{{challengeDetail.apply_end_time}}</text>
                <text v-else>无限制</text>
              </view>
            </view>
            <view style="padding: 20rpx 0;"><u-line color="#F0F0F0"></u-line></view>
            <view class="sign_content_warp">
              <view class="sign_content_title" style="color: #FE7F08">注意事项</view>
              <view class="sign_content_text">
                <view style="text-align: center;font-size: 40rpx;font-weight: bold;padding: 30rpx 0;">活动规则</view>
                <view>特别提示</view>
                <view>参与活动前，请仔细阅读活动规则的各个条款，特别是与用户违规相关的条款。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则</view>
                <view>1. 活动门槛:领食周边购平台正常用户均可参与</view>
                <view>2. 活动奖励规则:</view>
                <view style="color: #fc4106">下单奖励：邀请用户第一次下单邀请方必定获得3元，第二次下单必定获得10元 ，第三次下单后随机奖励至多可获得10元。<br>
                  邀请奖励：若用户在活动期间内邀请2名用户下单，除下单奖励外可额外获得15元，若邀请5名用户下单即可额外获得25元，若邀请8名用户下单即可额外获得35元。<br>
                  PS:邀请奖励为阶梯式奖励，活动过程中领取奖励会根据邀请人数及被邀请用户的下单情况自动发放至账户余额。<br>
                  发放时间：订单完成后次日自动发放至账户余额<br>
                  邀请人最终获得的奖励为下单奖励+邀请奖励<br>
                </view>
                <view>3. 活动周期：本活动七天为一个周期，邀请好友即视为参与活动，活动可结束后可重新参与。</view>
                <view>4. 奖励<text style="color: #fc4106">会根据邀请人数及被邀请用户的下单情况自动发放至账户余额</text>，用户可随时提现。</view>
                <view>5. 活动为领食周边购平台发起，领食周边购为主办方。用户在参与活动及奖励领取和使用期间，用户应严格遵守法律法规的规定，以及《领食周边购用户服务协议》和本规则约定，遵循诚实信用原则，不从事任何违反国家法律法规、违反本规则，或任何扰乱领食周边购平台秩序，违反公序良俗、侵害社会公共利益、他人利益以及活动方利益的行为。若用户存在违规行为(包括但不限于恶意套现、机器作弊、刷信誉、提供虚假信息等)，领食周边购平台有权取消违规用户的参与资格，并收回其已领取现金奖励，必要时追究法律责任。违规行为的禁止用户不得从事任何违规、异常或不正当的行为(以下统称违规行为)，违规行为包括但不限于:</view>
                <view>
                  （1）在领食周边购官方用户群内以任何直接或间接的形式获得团员包括但不限于转发海报、活动链接获得团员等行为;<br>
                  （2）每个新用户只能有一个邀请人，同一个登录账号、同一个手机号同司一个设备或同一提现账户，都视为同一个用户。通过小号作为新用户等作弊手段或利用机制漏洞获得奖励的行为;<br>
                  （3）通过任何不正当手段参与活动，如提供虚假订单、下单后联系商家私下取消订单、找商家返现、恶意退款等;<br>
                  （4）上传虚假截图或者上传他人订单截图，同一订单多次使用等;<br>
                  （5）盗用他人身份、领食周边购账号、提供虚假信息;<br>
                  （6）利用技术漏洞或规则漏洞下单、获取福利、补贴;<br>
                  （7）超出真实的消费需求购买商品;<br>
                  （8）批量或非出于交易目的注册账号、买号、养号;<br>
                  （9）从事其他违反《领食周边购用户服务协议》、活动规则或扰乱平台管理秩序的行为。<br>
                </view>
                <view style="font-size: 32rpx;font-weight: bold;padding: 20rpx 0">违规行为的判定</view>
                <view>您授权并同意，领食周边购平台有权通过风控系统对用户是否存在前述违规行为进行判定，有权依据用户注册/登录信息、用户行为、普通人的正常交易习惯、互联网领域行业惯例、生活常识等大数据进行综合分析评估，并采取如下一种或多种违规处理措施:</view>
                <view>
                  1.判定用户参与挑战赛的相关行为无效，包括但不限于用户自身及骑手、商家等他人原因导致的无效;<br>
                  2.驳回相关交易订单或者超时取消订单;<br>
                  3.限制或取消用户的活动资格;<br>
                  4.不发放奖励或用户已领取(含已使用以及未使用的)的奖励;<br>
                  5.撤销相关交易或活动福利，其他领食周边购平台为维护活动秩序、防止产生损失或依据有关协议/规则而采取的处理措施。请您理解，前述风控系统会随着活动发展、规则演变以及<br>
                  用户异常行为的增加和变化而发生变化，用户接受并认可风控系统对其行为的分析和判定，同时用户认可该系统涉及领食周边购平台的核心商业秘密，使用过程中不得恶意破坏或者窃取其系统信息。<br>
                </view>
                <view style="font-size: 32rpx;font-weight: bold;padding: 20rpx 0">其他说明</view>
                <view>
                  1.如出现不可抗力或情势变更的情况(包括但不限于重大灾害事件、活动受政府机关指令需要停止举办或调整的、活动遭受严重网络攻击或因系统故障需要暂停举办的),则领食周边购平台可依相关法律法规的规定或活动规则的说明主张免责。<br>
                  2.在法律法规允许的范围内，领食周边购平台有权对本活动规则进行变动或调整，相关变动或调整将公布在活动规则页面上，用户继续参与活动则视为同意并接受变动或者调整后的活
                  动规则。如本规则约定与《领食周边购用户服务协议》不一致的，以本规则约定为准;本规则未尽事宜，详见《领食周边购用户服务协议》。用户若对活动规则中的任何条款或活动过程中的相关页面信息有任何疑问的，可咨询客服。若不同意活动规则任何条款或对活动过程中的页面信息(包括活动方变动或调整后的活动规则和页面信息)有异议的，请用户立即停止参与活动。<br>
                  3.本规则条款的标题仅作参考使用，不界定、影响或限定本规则条款的含义、描述及解释。条标与对应条款不一致的，以规则条款约定的内容为准。<br>
                </view>
                <view>
                  本活动由领食周边购平台及各城市运营商主办，最终解释权归领食周边购平台及其城市运营商所有。如有疑问请联系在线专属客服，或邮件与我们联系，邮箱operate@lszbg.com<br>
                  用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则。<br>
                </view>
              </view>
            </view>
          </view>
          <view class="sign_up_box_btn">
            <view class="sign_up_box_rule">
              <view class="dianji">
                <image @tap="check_icon()" v-if="check_on == !1" class="check_icon"
                       :src="BestImgUrl + '/image/choose_1.png'"></image>
                <image @tap="check_icon()" v-else class="check_icon" :src="BestImgUrl + '/image/choose_2.png'">
                </image>
              </view>
              <view class="sign_up_box_rule_text">
                <text>我已阅读并同意</text>
                <text style="font-weight: bold;color: #3D3D3D;">《领食惠探店挑战赛规则》</text>
              </view>
            </view>
            <view class="sign_up_box_text" @click="challengeSignUp(challengeDetail.id)">立即报名</view>
          </view>
        </scroll-view>
      </view>
    </u-popup>
    <!--挑战赛规则弹窗-->
    <u-popup v-model="isShowRuleChallenge" mode="bottom" :border-radius="20" height="65%" closeable @close="isShowRuleChallenge = false" close-icon-color="#666666">
      <view class="rule_challenge_box">
        <view class="rule_challenge_title">
          <view style="height: 30rpx;"></view>
          挑战赛规则
          <u-line color="#f3f3f3"></u-line>
        </view>
        <view class="rule_challenge_content">
          <scroll-view class="rule_challenge_scroll" scroll-y style="height: 100%">
            <u-parse :html="ruleContent"></u-parse>
            <h3>特别提示</h3>
            <p>参与活动前，请仔细阅读活动规则的各个条款，用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则的约束挑战赛基本规则</p>
            <h4>一、活动门槛:领食惠探店平台正常用户均可参与</h4>
            <h4>二、活动奖励规则</h4>
            <p>邀请用户下单奖励：邀请新用户第一次下单，用户粉丝为0-500粉或大众点评等级LV1-LV5必定获得3元，500-1000粉或LV5-LV8等级必定获得6元，1000粉以上必定获得10元，第二次下单均必定获得10元，第三次下单后均随机奖励（至多可获得10元）。</p>
            <p>(1).下单奖励的粉丝-等级计入以认证时为准，小红书和大众点评只能计算一项，不能叠加领取奖励！</p>
            <p>(2).邀请赛奖励同一时段只能参与其中一个，</p>
            <p>(3)打卡赛奖励每天只统计一次打卡，每天即便下单10次也只统计一次有效订单，且必须在当天上传笔记（按上传笔记时间计）才算有效订单，即必须满足对应天数才能领取奖励列如7天下单7次则必须要满7天才可领取奖励）</p>
            <p>PS:邀请奖励为阶梯式奖励，活动过程中领取奖励会根据邀请人数及被邀请用户的下单情况自动发放至账户余额。挑战赛奖励则需要自己在我的报名-待领奖领取奖励到账户余额！用户可随时提现</p>
            <p>邀请人最终获得的奖励为下单奖励+邀请奖励</p>
            <p>活动周期：各活动参与周期以活动海报页面为准</p>
            <p>注：此活动最终解释权归领食惠探店所有！如有疑问请联系在线专属客服！</p>
            <view @click="isShowRuleChallenge = false" class="rule_btn">我知道了</view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurlBwc,
      NavTitle: '领食惠探店挑战赛',
      background: 'transparent',
      safeHeight: 0, // 安全区高度
      challengeData: [],//挑战赛数据
      challengeUserData: [], // 挑战赛用户数据
      // 挑战赛总统计
      challengeTotal: {},
      // 是否显示报名弹窗
      isShowSignUp: false,
      // 挑战赛详情
      challengeDetail: {},
      // 是否勾选
      check_on: false,
      // 滚动距离
      scHeight: 0,
      // 当前城市
      CityName: "",
      // 挑战赛规则是否显示
      isShowRuleChallenge: false,
      // 挑战赛规则数据
      ruleContent: ""
    };
  },
  onLoad() {
    // 获取顶部安全区域高度
    this.safeHeight = uni.getWindowInfo().safeArea.top
    this.CityName = uni.getStorageSync('CityName')
    console.log('CityName', this.CityName)

    this.getChallengeList();
    this.getUserChallengeList();
  },
  onPageScroll(e) {
    this.scHeight = e.scrollTop
    // console.log('滚动距离==', this.scHeight)
  },
  methods: {
    /* 挑战赛用户数据 */
    getUserChallengeList() {
      let that = this
      that.$api.getUserChallengeActivityListAPI({
        status: that.status,
      }).then(res => {
        if (res.data.code == 200){
          // console.log('我的挑战任务列表', res.data.result)
          res.data.result.list.forEach(item => {
            if (item.status == 1){
              that.challengeUserData.push(item)
            }
          })
          console.log('我的挑战赛进行中列表', that.challengeUserData)
        }
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },
    /* 挑战赛列表 */
    getChallengeList() {
      let that = this
      let lat = uni.getStorageSync('lat')
      let lon = uni.getStorageSync('lng')
      let CityName = uni.getStorageSync('CityName')
      let Province = uni.getStorageSync('Province')
      that.$api.getChallengeActivityListAPI({
        lat: lat, //纬度
        lng: lon, //经度
        province: Province,
        city: CityName,
      }).then(res => {
        that.challengeTotal = res.data.result.statistics
        if (res.data.result.list.length > 0){
          res.data.result.list.forEach(item => {
            let nowTime = new Date().getTime()
            let startTime = new Date(item.start_time).getTime()
            let endTime = new Date(item.end_time).getTime()
            if (nowTime < startTime){
              item.isTimeOut = 1
            } else if (nowTime >= startTime && nowTime <= endTime){
              item.isTimeOut = 2
            } else if (nowTime > endTime){
              item.isTimeOut = 3
            }
            that.challengeUserData.forEach(userItem => {
              if (item.id === userItem.challenge_id){
                item.end_time = userItem.end_date
                console.log('end_date==', item.end_time, userItem.end_date)
              }
            })
          })
        }
        that.challengeData = res.data.result.list
        console.log('挑战赛列表', res.data.result.list)
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
      })
    },

    /* 挑战赛报名弹窗 */
    goShowSignUp(item){
      console.log('挑战赛详情', item)
      let that = this
      let token = uni.getStorageSync('token')
      // 判断是否登录
      if (!token) {
        uni.navigateTo( {
          url: '/pages/login/login'
        })
        return
      }
      // 重置报名弹窗规则
      this.check_on = 0
      // 显示挑战赛弹窗
      that.isShowSignUp = true
      // 挑战赛详情
      that.challengeDetail = item

    },
    /* 挑战赛免费报名 */
    challengeSignUp(id){
      let that = this
      console.log('check_on', that.check_on)
      if (!that.check_on) {
        uni.showToast({
          title: '请先阅读并同意活动规则',
          icon: 'none',
          duration: 2000
        });
        return
      }
      // 免费报名提交
      that.$api.getJoinChallengeActivityAPI({
        challenge_id: id
      }).then(res => {
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
        // 重置报名弹窗规则
        this.check_on = 0
        // 清空我的挑战赛数据
        that.challengeUserData = []
        // 重新获取我的挑战赛数据
        that.getUserChallengeList()
        // 重新获取挑战赛列表
        that.getChallengeList()
        // 关闭弹窗
        that.isShowSignUp = false
      }).catch(err => {
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        })
      })
    },
    // 取消报名
    cancelSignUP(item){
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定取消报名吗？',
        success: function (res) {
          if (res.confirm) {
            that.$api.getCancelChallengeActivityAPI({
              user_challenge_id: item.id
            }).then(res => {
              if (res.data.code == 200){
                uni.showToast({
                  title: res.data.msg,
                  icon: 'none',
                  duration: 2000
                });
                that.challengeUserData = []
                that.getUserChallengeList()
              }
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
              })
            })
          }
        }
      });

    },
    //倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_time).getTime()
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      // console.log('结束时间', seconds)
      return seconds
    },

    // 倒计时结束后执行
    countDownEndFun(){
      uni.reLaunch({
        url: '/subpackageB/pages/moneyChallengeList/moneyChallengeList'
      })
      console.log('倒计时结束')
    },
    // 去下单
    placeOrder(){
      // 跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    // 勾选同意规则
    check_icon() {
      console.log('check_on=', this.check_on)
      if (this.check_on == !0) {
        this.check_on = !1
        this.Lowcheck_on = 1
      } else {
        this.check_on = !0
        this.Lowcheck_on = 0
      }
    },
    //倒计时计算
    countdowndays(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_date).getTime()
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      // console.log('结束时间', seconds)
      return seconds
    },
    /* countdowntime(item) {
      const now = new Date().getTime();
      let endTime = new Date(item.end_date).getTime()
      let oneDay = 24 * 60 * 60 * 1000;
      let isend = endTime - now > 0 ? (endTime - now) : 0;
      let days = Math.floor(isend / oneDay);
      let times = isend - (days * oneDay)
      let seconds = this.$moment(times).unix();
      // console.log('结束时间', times)
      return seconds
    }, */
    // 我的报名
    toMyJoin(){
      let token = uni.getStorageSync('token')
      if (!token) {
        uni.showToast( {
          title: '请先登录',
          icon: 'none',
          duration: 2000
        })
        setTimeout(function () {
          uni.navigateTo({url: "/pages/login/login"})
        }, 1500)
      } else {
        uni.navigateTo({url: "/subpackageB/pages/moneyMyChallenge/moneyMyChallenge"})
      }
    },
  }
}
</script>

<style lang="scss">
page{
  background: #F5F5F5;
  height: 100%;
  width: 100%;
}
.challenge_list{
  height: 100%;
  position: relative;
  background: #FEF3CE;
}
.challeng_list_bg{
  width: 100%;
  height: 710rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
.challenge_list_content{
  margin: 0 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  z-index: 2;
  /* 挑战赛列表banner css */
  .challenge_list_banner{
    position: relative;
    margin-top: 20rpx;
    .banner_img01{
      width: 200rpx;
      height: 65rpx;
      margin-left: 88rpx;
    }
    .banner_img02{
      width: 480rpx;
      height: 166rpx;
    }
    .banner_msg{
      margin-bottom: 20rpx;
      .banner_msg_text{
        font-size: 56rpx;
        color: #330601;
        font-weight: bold;
        text-align: center;
        padding: 8rpx 0;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 30rpx;
      }
    }
    .banner_text{
      margin: 20rpx 0;
      width: 500rpx;
      height: 56rpx;
      line-height: 36rpx;
      font-size: 24rpx;
      padding: 10rpx 20rpx;
      box-sizing: border-box;
      color: #330601;
      background: linear-gradient( 270deg, rgba(253,208,186,0) 10%, #FDB0A2 100%);
      border-radius: 30rpx;
    }
  }
  /* 挑战赛统计 css */
  .challenge_list_statistics{
    height: 140rpx;
    border-radius: 20rpx;
    padding: 10rpx;
    display: flex;
    justify-content: space-between;
    background: linear-gradient( 95deg, #FF4253 0%, #FFA537 100%);
    margin-bottom: 20rpx;
    .statistics_title{
      width: 200rpx;
      height: 100%;
      background: linear-gradient( 180deg, #FFFFFA 0%, #FFF1AF 100%);
      border-radius: 20rpx;
      .statistics_tip{
        width: 140rpx;
        height: 42rpx;
        line-height: 42rpx;
        font-size: 24rpx;
        color: #D06236;
        text-align: center;
        border-radius: 20rpx 0 20rpx 0;
        background: #FFF49C;
      }
      .statistics_title_text{
        width: 100%;
        text-align: center;
        font-size: 40rpx;
        color: #FD4806;
        padding: 10rpx 0;
      }
    }
    .statistics_content{
      background: linear-gradient( 180deg, #FFFFFA 0%, #FFF1AF 100%);
      border-radius: 20rpx;
      flex: 1;
      display: flex;
      justify-content: space-between;
      margin-left: 10rpx;
      padding: 10rpx;
      .statistics_item{
        width: 50%;
        text-align: center;
        .statistics_item_num{
          color: #FD4806;
          padding-bottom: 10rpx;
        }
        .statistics_item_text{
          color: #C27305;
          font-size: 26rpx;
          text-align: center;
        }
      }
      .statistics_item:first-child{
        border-right: 2rpx dashed #E89E33;
      }
    }
  }
  /* 挑战中活动 */
  .challenge_list_user{
    margin-bottom: 20rpx;
  }
  .user_list_content{
    background: linear-gradient( 94deg, #FD6661 10%, #FFB760 80%);
    border-radius: 20rpx;
    margin-bottom: 30rpx;
  }
  /* 惊喜挑战 奖金补贴 */
  .challenge_list_box{
    position: relative;
  }
  .list_box{
    background: linear-gradient( 94deg, #FD6661 10%, #FFB760 80%);
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    .user_list_item{
      position: relative;
      z-index: 12;
      background: linear-gradient( 94deg, #FD6661 10%, #FFB760 80%);

    }
    .user_list_item:last-child{
      border-radius: 0 0 20rpx 20rpx;
    }
  }

  .user_list_title{
    position: relative;
    background: #FFEAA3;
    border-radius: 20rpx 20rpx 0 0;
    .user_list_title_text{
      line-height: 130rpx;
      font-size: 48rpx;
      padding: 0 20rpx;
      color: #FFFFFF;
      position: relative;
      z-index: 10;
    }
    .user_list_title_bg{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1;
    }
  }
  .user_list_item{
    margin-bottom: 20rpx;

    .user_list_item_content{
      background: #FFFFFF;
      border-radius: 20rpx;
      margin: -20rpx 20rpx 0;
      padding: 20rpx;
      position: relative;
      z-index: 12;
      .user_list_item_content_top{
        height: 50rpx;
        line-height: 50rpx;
        position: absolute;
        left: 10rpx;
        top: 10rpx;
        right: 20rpx;
        display: flex;
        justify-content: space-between;
        .user_list_item_content_time{
          width: 320rpx;
          height: 50rpx;
          padding-left: 20rpx;
          color: #6B0C03;
          font-size: 26rpx;
          background: linear-gradient( 270deg, rgba(254,212,187,0) 0%, #FFDFD9 100%);
          border-radius: 20rpx 0 0 0;
        }
        .user_list_end_time{
          font-size: 26rpx;
          color: #888888;
        }
        .user_list_item_content_join{
          display: flex;
          align-items: center;
          .list_join_text{
            font-size: 26rpx;
            color: #888888;
          }
        }
      }
      .user_list_warp{
        margin-top: 40rpx;
        display: flex;
        flex: 1;
        padding: 20rpx 0 0;
        .challenge_item_img{
          width: 140rpx;
          height: 180rpx;
          position: relative;
          .challenge_item_img_text{
            width: 100%;
            height: 110rpx;
            line-height: 110rpx;
            position: absolute;
            top: 0;
            color: #FA642B;
            text-align: center;
          }
        }
        .challenge_item_content{
          flex: 1;
          .challenge_item_content_title{
            width: 100%;
            margin-left: 20rpx;
            .challenge_item_content_title_text{
              font-size: 28rpx;
              color: #222222;
              font-weight: bold;
              line-height: 40rpx;
              margin-bottom: 10rpx;
            }
            .challenge_item_content_title_msg{
              line-height: 40rpx;
              font-size: 28rpx;
              color: #888888;
              .challenge_item_msg_text{
                flex: 1;
              }
              .user_list_foot_btn{
                width: 180rpx;
                position: relative;
              }
            }
          }
          .challenge_item_content_warp{
            margin-left: 20rpx;
            font-size: 26rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .challenge_item_content_title_msg{
              width: calc(100% - 150rpx);
              line-height: 40rpx;
              font-size: 28rpx;
              color: #888888;
            }
            .challenge_item_content_btn{
              width: 140rpx;
              height: 56rpx;
              line-height: 56rpx;
              font-size: 28rpx;
              color: #FFFFFF;
              text-align: center;
              padding: 0 8rpx;
              background: linear-gradient( 90deg, #FD3F03 0%, #FE7F08 100%);
              border-radius: 30rpx;
            }
            .challenge_item_content_cancelBtn{
              width: 140rpx;
              height: 56rpx;
              line-height: 56rpx;
              font-size: 26rpx;
              color: #888888;
              text-align: center;
            }
          }
          .during{
            width: 170rpx;
            height: 56rpx;
            line-height: 56rpx;
            color: #888888;
            background: #FFFFFF;
            border: 2rpx solid #888888;
            position: absolute;
            right: 0;
            bottom: 0;
          }
        }
      }
      .user_list_foot{
        display: flex;
        justify-content: space-between;
        padding-top: 20rpx;
        .foot_remaining_time{
          width: 350rpx;
          .count_down_time{
            font-size: 26rpx;
            color: #333333;
            margin-bottom: 10rpx;
          }
          .user_list_progress{
            font-size: 24rpx;
            color: #666666;
            display: flex;
            align-items: center;
            .user_list_progress_left{
              padding-right: 10rpx;
            }
            .user_list_progress_right{
              width: 180rpx;
              height: 20rpx;
              border-radius: 30rpx;
              background: #EEEEEE;
              .progress_active{
                height: 20rpx;
                border-radius: 30rpx;
                background: linear-gradient( 270deg, #FFB460 0%, #FF4E5E 100%);
              }
            }
          }
        }
        .user_list_foot_btn{
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .challenge_cancel_btn{
            height: 60rpx;
            line-height: 40rpx;
            padding: 10rpx 20rpx;
            border: 2rpx solid #E5E5E5;
            border-radius: 30rpx;
            font-size: 26rpx;
          }
          .challenge_confirm_btn{
            height: 60rpx;
            line-height: 40rpx;
            padding: 10rpx 20rpx;
            font-size: 26rpx;
            border: 2rpx solid #E5E5E5;
            border-radius: 30rpx;
            color: #FFFFFF;
            background: linear-gradient( 90deg, #FD3F03 0%, #FE7F08 100%);
          }
        }
      }
    }
  }
}
.challenge_list_scroll{

}
/* 领食挑战赛css */
.challenge_list{

}
.challenge_item{
  display: flex;
  flex: 1;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #E5E5E5;
  .challenge_item_img{
    width: 108rpx;
    height: 120rpx;
    position: relative;
    .challenge_item_img_text{
      width: 100%;
      height: 72rpx;
      line-height: 72rpx;
      position: absolute;
      top: 0;
      color: #FA642B;
      text-align: center;
    }
  }
  .challenge_item_content{
    flex: 1;
    .challenge_item_content_title{
      width: calc(100% - 150rpx);
      margin-left: 10rpx;
      .challenge_item_content_title_text{
        font-size: 28rpx;
        color: #222222;
        font-weight: bold;
        line-height: 40rpx;
      }

    }
    .challenge_item_content_warp{
      margin-left: 10rpx;
      font-size: 26rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .challenge_item_content_title_msg{
        width: calc(100% - 150rpx);
        line-height: 40rpx;
        font-size: 28rpx;
        color: #888888;
      }
      .challenge_item_content_btn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        text-align: center;
        padding: 0 8rpx;
        background: linear-gradient( 90deg, #FD3F03 0%, #FE7F08 100%);
        border-radius: 30rpx;
      }
      .challenge_item_content_cancelBtn{
        width: 140rpx;
        height: 56rpx;
        line-height: 56rpx;
        font-size: 26rpx;
        color: #888888;
        text-align: center;
      }
    }
    .during{
      // width: 160rpx;
      height: 110rpx;
      line-height: 30rpx;
      color: #888888;
      background: #FFFFFF;
      border: 2rpx solid #888888;
      display: flex;
      padding: 10rpx 0;
    }
  }
}
.challenge_item:last-child{
  border-bottom: 0;
}

/* 免费报名弹窗 */
.sign_up_box{
  padding: 20rpx;
  .sign_warp{
    display: flex;
    .challenge_item_img{
      width: 108rpx;
      height: 120rpx;
      position: relative;
      .challenge_item_img_text{
        width: 100%;
        height: 72rpx;
        line-height: 72rpx;
        position: absolute;
        top: 0;
        color: #FA642B;
        text-align: center;
      }
    }
    .challenge_item_content{
      flex: 1;
      .challenge_item_content_title{
        margin-left: 10rpx;
        .challenge_item_content_title_text{
          font-size: 28rpx;
          color: #222222;
          font-weight: bold;
          line-height: 40rpx;
          margin-bottom: 10rpx;
        }
        .challenge_item_content_title_msg{
          font-size: 26rpx;
          color: #888888;
        }
      }
    }
  }
  .sign_content{
    padding-bottom: 160rpx;
    .sign_content_warp{
      .sign_content_title{
        font-size: 32rpx;
        line-height: 80rpx;
      }
      .sign_content_item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 24rpx;
        color: #666666;
        line-height: 50rpx;
      }
    }
  }
  .sign_up_box_btn{
    height: 210rpx;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    background: #FFFFFF;
    box-shadow: 0 -2rpx 10rpx 0 rgba(0, 0, 0, 0.1);
    padding-left: 20rpx;
    padding-right: 20rpx;
    padding-bottom: env(safe-area-inset-bottom);
    .sign_up_box_rule{
      display: flex;
      align-items: center;
      text-align: center;
      height: 80rpx;

      font-size: 24rpx;
      .check_icon {
        width: 34rpx;
        height: 34rpx;
        position: relative;
        margin-right: 7rpx;
      }
      .sign_up_box_rule_text{
        line-height: 80rpx;
        color: #666666;
        margin-left: 10rpx;
      }
    }
    .sign_up_box_text{
      width: 100%;
      height: 68rpx;
      line-height: 68rpx;
      color: #FFFFFF;
      text-align: center;
      font-size: 28rpx;
      border-radius: 50rpx;
      background: linear-gradient( 180deg, #FE7F08 0%, #FD3F03 100%);
    }
  }
}
/* 挑战赛规则按钮css */
.challenge_rule_btn{
  width: 40rpx;
  height: 80rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  color: #3D3D3D;
  text-align: center;
  position: fixed;
  right: 0;
  top: 20%;
  background: rgba(255,255,255,0.8);
  border-radius: 10rpx 0 0 10rpx;
}
/* 挑战赛规则弹窗css */
.rule_challenge_box{
  height: 100%;
  display: flex;
  flex-direction: column;
  position:relative;
  padding-bottom: env(safe-area-inset-bottom);
  .rule_challenge_title{
    font-size: 32rpx;
    color: #333333;
    text-align: center;
    height: 110rpx;
    line-height: 80rpx;
  }
  .rule_challenge_content{
    flex: 1;
    overflow-y: auto;
    font-size: 28rpx;
    color: #666666;
    line-height: 40rpx;
    padding: 20rpx 20rpx 0;
    h3{
      font-size: 32rpx;
      color: #3D3D3D;
    }
    p{
      padding: 20rpx 0;
    }
    .rule_btn{
      width: 80%;
      height: 80rpx;
      line-height: 80rpx;
      margin: 0 auto;
      text-align: center;
      font-size: 32rpx;
      color: #FFFFFF;
      background: linear-gradient( 64deg, #FC754A 0%, #FEBC5B 100%);
      border-radius: 40rpx;
    }
  }
}
</style>
